<!--
 * @Author       : tingke
 * @Date         : 2021-02-26 16:56:54
 * @LastEditors  : tingke
 * @LastEditTime : 2021-03-01 08:58:49
 * @FilePath     : /React/example.html
 * @Description  :
-->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./react/react.development.js"></script>
        <script src="./react/react-dom.development.js"></script>
        <!-- 生产环境中不建议使用 -->
        <script src="./react/babel.min.js"></script>
    </head>
    <body>
        <!-- 将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上 -->
        <div id="example"></div>

        <!-- React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。 -->
        <!-- 目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法 -->
        <!--  React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分 -->
        <div id="time"></div>
        <div id="time2"></div>
        <script type="text/babel">
            ReactDOM.render(
                <h1>Hello, React!</h1>,
                document.getElementById("example")
            );

            function tick() {
                const element = (
                    <div>
                        <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
                    </div>
                );
                ReactDOM.render(element, document.getElementById("time"));
            }

            setInterval(tick, 1000);

            /*********** 封装 begin **********/
            // function Clock(props) {
            //     return (
            //         <div>
            //             <h1>Hello, world!</h1>
            //             <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
            //         </div>
            //     );
            // }


            class Clock extends React.Component {
                render() {
                    return (
                        <div>
                            <h1>Hello, world!</h1>
                            <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
                        </div>
                    );
                }
            }


            function tick2() {
                ReactDOM.render(
                    <Clock date={new Date()} />,
                    document.getElementById("time2")
                );
            }

            setInterval(tick2, 1000);
            /*********** 封装 end **********/
        </script>
    </body>
</html>
